<template>
	<view>
		<navbar :title="$t('wode.set')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		<view>
		<!-- <view class="push">
			<view>

			{{$t("my.my")}}
			</view>
			<u-switch v-model="checked" active-color="#CDF4CAFF" size="40"></u-switch>
		</view> -->
		<view class="mybox1">
			<u-cell-group>
					<u-cell-item  :title="$t('my.login')" @click="showLogin = !showLogin"></u-cell-item>
					<u-cell-item  :title="$t('my.withdraw')" @click="showWithdraw = !showWithdraw"></u-cell-item>
					<u-cell-item  :title="$t('my.lan')" :value="reLanguage" @click="showLang = true"></u-cell-item>
					<!-- <u-cell-item  title="Clear cache" value="34M" @click="clear"></u-cell-item> -->
			</u-cell-group>
		</view>
		<view class="mybox2">
			<u-cell-group style="margin-bottom:212rpx;">
					<u-cell-item  :title="$t('wode.user')" @click="user()" ></u-cell-item>
					<u-cell-item  :title="$t('wode.version')" :value="version" :arrow="false"></u-cell-item>
			</u-cell-group>
			<view class="log red" @click="deleteAccount" v-if="(platform == 'ios' && (systemInfo.is_audited == undefined || systemInfo.is_audited == '0'))">
					Delete Account
			</view>
			<view class="log" style="margin-top:30rpx;margin-bottom:30rpx;" @click="logout">
					{{$t("my.out")}}
			</view>
		</view>
		<userlog type="1" :showPopup="showLogin" @showClose="showLogin = false"></userlog>
		<userlog type="2" :showPopup="showWithdraw" @showClose="showWithdraw = false"></userlog>
		<u-select v-model="showLang" :list="languageList" @confirm="changLang" :confirm-text="$t('common.confirm')"
			:cancel-text="$t('common.cancel')"></u-select>
		</view>
	</view>
</template>

<script>
	import {
		Logout,
		deluser
	} from '@/api/auth.js'
	export default {
		data() {
			return {
				showLogin: false,
				showWithdraw: false,
				checked: false,
				modifyl:false,
				modify2:false,
				modifyp:false,
				set1:'',
				set2:'',
				codes:'',
				eye1:false,
				codestyle:{
					background:'#ECECECFF',
					borderRadius:' 10rpx',
					fontSize: '28rpx',
					fontFamily:' Rubik',
					fontWeight: '300',
					color: '#AAAAAA',
					height:'90rpx',
					paddingLeft:'33rpx',
					width:'460rpx'
				},
				value:{
						value1:'',
						value2:'',
						value3:''
				},
				inputtype:{
					width:'600rpx',
					height: '90rpx',
					background: '#ECECEC',
					borderRadius: '10rpx',
					paddingLeft:'30rpx',
					marginTop:'30rpx'
				},
				showLang: false,
				languageList: [
					{
						value: 'english',
						label: 'English'
					},
					{
						value: 'hi_di',
						label: 'हिंदी'
					},
				],
				
			};
		},
		computed: {
			reLanguage() {
				let lan = ''
				let language = uni.getStorageSync('language') || 'english'
				if (language == 'hi_di') {
					lan = 'हिंदी'
				} else {
					lan = 'English'
				}
				return lan
			},
			version() {
				return uni.getStorageSync('localVersion') || '0.0.0'
			},
			systemInfo() {
				return this.$store.getters.systemInfo || {}
			},
			platform() {
				return this.$store.getters.platform || ''	
			},
		},
		methods: {
			changLang(e) {
				// this.$i18n.locale = 'hi'
				uni.setStorageSync('language', e[0].value)
				// #ifdef APP-PLUS
				plus.runtime.restart()
				// #endif
				// #ifndef APP-PLUS
				window.location.reload()
				// #endif
			},
			modifyL(key) {
				if(!this.$data[key]){
					this.$data[key] = true
				}
				
			},
			user(){
				uni.navigateTo({
					url:"../user/user"
				})
			},
			clear() {
					uni.showModal({
						title: '清除',
						content: '确定要清除，进行重启测试？',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								// 清除缓存
								uni.clearStorage();
								uni.showToast({
									icon: 'none',
									duration:3000,
									title: '清除成功2秒后重启',
									position: 'center',
								});
								// 两秒后重启
								setTimeout(function() {
									uni.hideToast();
									plus.runtime.restart();
								}, 2000);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
			},
			next1(){
				this.modifyp = false
				this.set1 = true
			},
			next2(){
				this.set1 = false
				this.set2 = true
			},
			logout () {
				uni.showLoading({
				});
				Logout().then(res => {
					uni.hideLoading();
					this.$store.dispatch('removeToken')
					uni.setStorageSync('overwindow', 0)
					uni.setStorageSync('overlevelwindow', 0)
					uni.redirectTo({
						 url: '/pages/home/home'
					});
				}).catch(() => {
				})
			},
			deleteAccount() {
				uni.showModal({
					title: 'Reminder',
					content: 'Are you sure you want to delete your FunGroup account permanently?',
					cancelText: 'Give up',
					confirmText: 'Confirm',
					success: async (res) => {
						if (res.confirm) {
							deluser().then(res => {
								uni.hideLoading();
								this.$store.dispatch('removeToken')
								uni.setStorageSync('overwindow', 0)
								uni.redirectTo({
									url: '/pages/home/home'
								});
							}).catch(() => {
							})
						}
					}
				});
			}
		},
	}
</script>
<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.push{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 118rpx;
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #2B3039;
		line-height: 118rpx;
		padding: 0 40rpx;
		background-color: #FFFFFFFF;
	}
	/deep/.u-switch__node{
		background-color: #17CD0AFF;
	}
	.mybox1{
		background-color:#FFFFFFFF ;
	}
	
	/deep/.u-cell_title{
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #2B3039;
	}
	/deep/.u-cell__value{
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #AAAAAA;
	}
	.mybox2{
		overflow: hidden;
		margin-top: 20rpx;
		background-color:#FFFFFFFF ;
	}
	.log{
		width: 670rpx;
		height: 90rpx;
		background: $u-type-primary;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #fff;
		line-height: 90rpx;
		text-align: center;
		// margin-top: 212rpx;
		margin-left: 40rpx;
	}
	.red {
		background: #fff;
		border: 1rpx solid #ee5016;
		color:#ee5016;
	}
	
	.modifyL{
		margin-left: 45rpx;
		.modifyl-ps{
			overflow: hidden;
			width: 660rpx;
			height: 504rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.modifyl-ps-tittle{
				display: flex;
				margin-top: 40rpx;
				margin-bottom: 20rpx;
				justify-content: center;
				font-size: 36rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
			}
			.modifyl-ps-input{
				margin-left: 30rpx;
				margin-right: 30rpx;
				position: relative;
				.line1{
					position: absolute;
					right: 30rpx;
					top: 64rpx;
				}
				.line2{
					position: absolute;
					right: 30rpx;
					top: 182rpx;
				}
				.line3{
					position: absolute;
					right: 30rpx;
					top: 302rpx;
				}
			}
		}
		
		.confirm{
			width: 660rpx;
			height: 90rpx;
			background: #FFE87E;
			border-radius: 10rpx;
			margin-top: 60rpx;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;		
			text-align: center;
			line-height: 90rpx;
		}
	}
	/deep/.u-mode-center-box{
		background-color: rgba(0,0,0,0);
	}
	
		
	.withdraw-box{
		width: 660rpx;
		height: 624rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		text-align: center;
		.withdraw-tittle{
			font-size: 36rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			margin: 42rpx  0rpx ;
			line-height: 36rpx;
			text-align: center;
		}
		.send{
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 300;
			color: #FC3E32;
			margin: 30rpx 30rpx 30rpx;
			text-align: left;
		}
	}
	
	.code{
		margin: 20rpx 30rpx 0;
		display: flex;
		align-items: center;
	}
	.otp{
		width: 120rpx;
		height: 90rpx;
		background: #2399FD;
		border-radius: 10rpx;
		text-align: center;
		margin-left: 20rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
	}
	.confirm{
		width: 660rpx;
		height: 90rpx;
		background: $u-type-primary;
		border-radius: 10rpx;
		margin: 60rpx auto;
		font-size: 30rpx;
		font-weight: 400;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
	}
	.set-box{
		width: 660rpx;
		height: 332rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		.set-tittle{
			font-size: 36rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			margin: 36rpx 110rpx 30rpx 114rpx;
			line-height: 36rpx;
			text-align: center;
		}
		.enter{
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 300;
			color: #FC3E32;
			margin-left: 32rpx;
		}
	}
	
	.next2{
		width: 660rpx;
		height: 90rpx;
		background: $u-type-primary;
		border-radius: 10rpx;
		margin: 60rpx auto;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #fff;
		line-height: 90rpx;
		text-align: center;
	}
	.set-new{
		font-size: 36rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E;
		margin: 36rpx 88rpx 30rpx 88rpx;
		line-height: 36rpx;
		text-align: center;
	}
	
</style>
